<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<title>Req1 &middot; Pricing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap.css" th:href="@{/resources/css/bootstrap.css}" />

<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}
</style>

<style>
.pricing-table .plan {
	border-radius: 5px;
	text-align: center;
	background-color: #f3f3f3;
	-moz-box-shadow: 0 0 6px 2px #b0b2ab;
	-webkit-box-shadow: 0 0 6px 2px #b0b2ab;
	box-shadow: 0 0 6px 2px #b0b2ab;
}

.plan:hover {
	background-color: #fff;
	-moz-box-shadow: 0 0 12px 3px #b0b2ab;
	-webkit-box-shadow: 0 0 12px 3px #b0b2ab;
	box-shadow: 0 0 12px 3px #b0b2ab;
}

.plan {
	padding: 20px;
	color: #ff;
	background-color: #5e5f59;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.plan-name-bronze {
	padding: 20px;
	color: #fff;
	background-color: #665D1E;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.plan-name-silver {
	padding: 20px;
	color: #fff;
	background-color: #C0C0C0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.plan-name-gold {
	padding: 20px;
	color: #fff;
	background-color: #FFD700;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.pricing-table-bronze {
	padding: 20px;
	color: #fff;
	background-color: #f89406;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.pricing-table .plan .plan-name span {
	font-size: 20px;
}

.pricing-table .plan ul {
	list-style: none;
	margin: 0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

.pricing-table .plan ul li.plan-feature {
	padding: 15px 10px;
	border-top: 1px solid #c5c8c0;
}

.pricing-three-column {
	margin: 0 auto;
	width: 80%;
}

.pricing-variable-height .plan {
	float: none;
	margin-left: 2%;
	vertical-align: bottom;
	display: inline-block;
	zoom: 1;
	*display: inline;
}

.plan-mouseover .plan-name {
	background-color: #4e9a06 !important;
}

.btn-plan-select {
	padding: 8px 25px;
	font-size: 18px;
}
</style>


<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap-responsive.css"
	th:href="@{/resources/css/bootstrap-responsive.css}" />

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->


</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#" style="color: yellow; font-weight: bold">Req1</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li><a href="welcome">Home</a></li>
						<li class="active"><a href="pricing">Pricing</a></li>
						<li><a href="#contact">Features</a></li>
						<li><a href="registration">Join Us</a></li>
					</ul>
					<form class="navbar-form pull-right"
						th:action="@{/j_spring_security_check}"
						action="j_spring_security_check" method="post">
						<input class="span2" placeholder="Email" type="text"
							name="j_username" /> <input class="span2" placeholder="Password"
							type="password" name="j_password" />
						<button type="submit" class="btn">Sign in</button>
					</form>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row-fluid pricing-table pricing-three-column">
			<div class="span4 plan">
				<div class="plan-name-bronze">
					<h2>Bronze</h2>
					<span>$20.00 / Month</span>
				</div>
				<ul>
					<li class="plan-feature">10 Users</li>
					<li class="plan-feature">Unlimited projects</li>
					<li class="plan-feature">Unlimited requirements</li>

					<li class="plan-feature"><a href="#"
						class="btn btn-primary btn-plan-select"><i
							class="icon-white icon-ok"></i> Select</a></li>
				</ul>
			</div>
			<div class="span4 plan">
				<div class="plan-name-silver">
					<h2>
						Silver <span class="badge badge-warning">Popular</span>
					</h2>
					<span> <font color="red">$30.00 - <span
							class="label label-warning">Sale</span>
					</font></span>
				</div>
				<ul>
					<li class="plan-feature">50 Users</li>
					<li class="plan-feature">Unlimited projects</li>
					<li class="plan-feature">Unlimited use cases</li>
					<li class="plan-feature"><a href="#"
						class="btn btn-primary btn-plan-select"><i
							class="icon-white icon-ok"></i> Select</a></li>
				</ul>
			</div>
			<div class="span4 plan">
				<div class="plan-name-gold">
					<h2>Gold</h2>
					<span>$40.00 / Month</span>
				</div>
				<ul>
					<li class="plan-feature">Unlimited Users</li>
					<li class="plan-feature">Unlimited projects</li>
					<li class="plan-feature">Unlimited use cases</li>
					<li class="plan-feature"><a href="#"
						class="btn btn-primary btn-plan-select"><i
							class="icon-white icon-ok"></i> Select</a></li>
				</ul>
			</div>
		</div>
		<hr />
	</div>
	<!-- /container -->
	
	<div class="container">
		<div class="row-fluid">
			<div class="span12">
				<div class="span2" style="width: 15%;">
					<ul class="unstyled">
						<li>GitHub</li>
						<li></li>
						<li><a href="#">About us</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Contact support</a></li>
						<li><a href="#">Enterprise</a></li>
						<li><a href="#">Site status</a></li>
					</ul>
				</div>
				<div class="span2" style="width: 15%;">
					<ul class="unstyled">
						<li>Applications</li>
						<li></li>
						<li><a href="#">Product for Mac</a></li>
						<li><a href="#">Product for Windows</a></li>
						<li><a href="#">Product for Eclipse</a></li>
						<li><a href="#">Product mobile apps</a></li>
					</ul>
				</div>
				<div class="span2" style="width: 15%;">
					<ul class="unstyled">
						<li>Services</li>
						<li></li>
						<li><a href="#">Web analytics</a></li>
						<li><a href="#">Presentations</a></li>
						<li><a href="#">Code snippets</a></li>
						<li><a href="#">Job board</a></li>
					</ul>
				</div>
				<div class="span2" style="width: 15%;">
					<ul class="unstyled">
						<li>Documentation</li>
						<li></li>
						<li><a href="#">Product Help</a></li>
						<li><a href="#">Developer API</a></li>
						<li><a href="#">Product Markdown</a></li>
						<li><a href="#">Product Pages</a></li>
					</ul>
				</div>
				<div class="span2" style="width: 15%;">
					<ul class="unstyled">
						<li>More</li>
						<li></li>
						<li><a href="#">Training</a></li>
						<li><a href="#">Students teachers</a></li>
						<li><a href="#">The Shop</a></li>
						<li><a href="#">Plans pricing</a></li>
						<li><a href="#">Contact us</a></li>
					</ul>
				</div>
			</div>
		</div>
		<hr />
		<div class="row-fluid">
			<div class="span12">
				<div class="span8">
					<a href="#">Terms of Service</a> <a href="#">Privacy</a> <a
						href="#">Security</a>
				</div>
				<div class="span4">
					<p class="muted pull-right">© 2013 Company Name. All rights
						reserved</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.js" th:src="@{/resources/js/jquery.js}"></script>
	<script src="js/bootstrap-transition.js"
		th:src="@{/resources/js/bootstrap-transition.js}"></script>
	<script src="js/bootstrap-alert.js"
		th:src="@{/resources/js/bootstrap-alert.js}"></script>
	<script src="js/bootstrap-modal.js" th:src="@{/resources/js/jquery.js}"></script>
	<script src="js/bootstrap-dropdown.js"
		th:src="@{/resources/js/bootstrap-dropdown.js}"></script>
	<script src="js/bootstrap-scrollspy.js"
		th:src="@{/resources/js/bootstrap-scrollspy.js}"></script>
	<script src="js/bootstrap-tab.js"
		th:src="@{/resources/js/bootstrap-tab.js}"></script>
	<script src="js/bootstrap-tooltip.js"
		th:src="@{/resources/js/bootstrap-tooltip.js}"></script>
	<script src="js/bootstrap-popover.js"
		th:src="@{/resources/js/bootstrap-popover.js}"></script>
	<script src="js/bootstrap-button.js"
		th:src="@{/resources/js/bootstrap-button.js}"></script>
	<script src="js/bootstrap-collapse.js"
		th:src="@{/resources/js/bootstrap-collapse.js}"></script>
	<script src="js/bootstrap-carousel.js"
		th:src="@{/resources/js/bootstrap-carousel.js}"></script>
	<script src="js/bootstrap-typeahead.js"
		th:src="@{/resources/js/bootstrap-typeahead.js}"></script>




</body>
</html>